<template>
  <div class="home_container">
    <div class="top_box">
      <p>阴影边框+图标Tab</p>
      <p>增加图标lcon，标签栏增加底色</p>
    </div>
    <div class="tabs_box">
      <el-tabs
        v-model="tabsActiveName"
        type="card"
        class="tabs"
        @tab-click="handleClick"
      >
        <template
          v-for="(item, index) in tabsList"
          :key="index"
        >
          <el-tab-pane
            :label="item.name"
            :name="item.type"
          >
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <component :is="item.icon" />
                </el-icon>
                <span>{{item.text}}</span>

              </span>
            </template>
            <tabsEdit />
          </el-tab-pane>
        </template>
      </el-tabs>

      <div class="search_box">
        <el-icon>
          <Operation />
        </el-icon>
        <el-input
          v-model="searchValue"
          class="search"
          placeholder="搜索"
          size="small"
          :prefix-icon="Search"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'home' })
import { ref, onMounted } from "vue";
import { Edit, View, Notification, ChatDotRound, Promotion, Tickets, DocumentChecked, Search, Close } from "@element-plus/icons-vue";
import tabsEdit from "./components/tabs_edit.vue";


const tabsActiveName = ref(1)
const searchValue = ref('')
const active = ref(0)

const orderAppraise = [
  { id: 1, customName: '我编辑过的', name: 'edit', icon: Edit },
  { id: 2, customName: '我浏览过的', name: 'browse', icon: View },
]
const returnClass = index => {
  if (active.value === index) return "";
  if (active.value + 1 === index) return "remove_right_radius";
  if (active.value - 1 === index) return "remove_left_radius";
  return "remove_left_radius remove_right_radius";
};

const tabsList = [
  { type: 1, text: '我编辑过的', name: 'edit', icon: Edit },
  { type: 2, text: '我浏览过的', name: 'browse', icon: View },
  { type: 3, text: '分配给我的', name: 'distribution', icon: Notification },
  { type: 4, text: '我评论过的', name: 'comment', icon: ChatDotRound },
  { type: 5, text: '我提交过的', name: 'submitUp', icon: Promotion },
  { type: 6, text: '提交给我的', name: 'submitMy', icon: Tickets },
  { type: 7, text: '我已完成的', name: 'complete', icon: DocumentChecked },
]
const handleClick = (tab, event) => {
  console.log(tab, event);
}
onMounted(() => {
  console.log('首页');
})
</script>

<style lang="scss" scoped>
._option_box {
  height: 54px;
  background-color: #cedee4;
}
._option_title {
  background: linear-gradient(#cedee4 50%, #fff 50%);
  height: 54px;
  display: flex;
  align-items: flex-end;
  ._item {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #cedee4;
    padding: 6px 5px 8px 8px;
    height: 40px;
    display: flex;
    cursor: pointer;
    align-items: center;
    font-size: 12px;
    .el-icon {
      // opacity: 0;
      margin-left: 35px;
      border-radius: 4px;
      height: 18px;
      width: 22px;
      cursor: pointer;
    }
  }
  .active {
    .el-icon {
      opacity: 1;
    }
    .el-icon:hover {
      background-color: #ebebed;
    }
  }
  .title_end {
    flex: 1;
  }
  .title_start {
    width: 5px;
  }
  p:nth-child(1) {
    border-bottom-left-radius: 0;
  }
  p:nth-last-child(2) {
    border-bottom-right-radius: 0;
  }
  .remove_left_radius {
    border-bottom-left-radius: 0;
  }
  .remove_right_radius {
    border-bottom-right-radius: 0;
  }
  p.active {
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

// ----------------------标签页-------------------

.home_container {
  padding: 10px;
}
.top_box {
  height: 70px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  padding: 10px;
  p {
    font-size: 12px;
  }
}
:deep(.tabs_box) {
  position: relative;
  .custom-tabs-label {
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 4px;
    }
  }
  .el-tabs__header {
    margin-bottom: 5px;
  }
  .el-tabs__item.is-active {
    border-bottom: 1px #9954ff solid;
  }
  .search_box {
    position: absolute;
    left: 920px;
    top: 5px;
    display: flex;
    align-items: center;
    .search {
      width: 170px;
    }
    .el-icon {
      font-size: 22px;
      cursor: pointer;
      padding-right: 5px;
    }
  }
}
</style>
